<template>
  <div class="app-container">
    <!-- 顶部Cards栏 -->
    <TopCards />
    <!-- 使用托盘 -->
    <el-row style="margin-top: -20px">
      <el-col :span="24">
        <div class="grid-huoqu">
          <div class="region">
            <header class="region_header">
              <h1 class="region_title">使用托盘</h1>
            </header>
            <div class="region_details">
              <div class="details">
                <ul class="ul-details">
                  <li @click="openPopup">
                    <div class="li_date">
                      <div class="date">货区名称:M-1</div>
                      <div class="box">
                        <div class="color_tag1 data-tag">货区种类：药品</div>
                        <div class="color_tag2 data-tag">货区数量：567</div>
                        <div class="color_tag3 data-tag">货区类型：成品</div>
                      </div>
                    </div>
                  </li>
                  <li>M21-2</li>
                  <li>M21-3</li>
                  <li>M21-4</li>
                  <li>M21-5</li>
                  <li>M21-6</li>
                  <li>M21-7</li>
                  <li>M21-8</li>
                  <li>M21-9</li>
                  <li>M21-10</li>
                  <li>M21-11</li>
                  <li>M21-12</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 空置托盘 -->
    <el-row>
      <el-col :span="24">
        <div class="grid-huoqu">
          <div class="region">
            <header class="region_header">
              <h1 class="region_title">空置托盘</h1>
            </header>
            <div class="region_details">
              <div class="details">
                <ul class="ul-details ul-details_2">
                  <li>
                    <div class="li_date">
                      <div class="date">货区名称:M-13</div>
                      <div class="box">
                        <div class="color_tag1 data-tag">货区种类：药品</div>
                        <div class="color_tag2 data-tag">货区数量：567</div>
                        <div class="color_tag3 data-tag">货区类型：成品</div>
                      </div>
                    </div>
                  </li>
                  <li>M11-2</li>
                  <li>M11-3</li>
                  <li>M11-4</li>
                  <li>M11-5</li>
                  <li>M11-6</li>
                  <li>M11-7</li>
                  <li>M11-8</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TopCards from "./TopCards";
export default {
  components: {
    TopCards,
  },
  data() {
    return {};
  },
  methods: {
    openPopup() {
      this.$router.push({ path: '/libraryExcess', query: { tab: 'position' } });
    },
  },
};
</script>

<!-- Layout布局样式，结构样式 -->
<style scoped>
/* .app-container {} */

.el-row {
  margin-bottom: 10px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  /* background-color: rgba(146, 141, 141, 0.22); */
  background: rgb(245, 245, 245);
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

<!-- 顶部Cards栏样式 -->
<style scoped>
/* 移除所有ul和ol列表的小黑点 */
ul,
ol {
  list-style: none;
}

.info-wrapper {
  margin: 5px;
}

.cards {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0px;
  min-width: 1014px;
  width: 100%;
  /* background: rgb(245, 245, 245); */
}

.cards .card {
  position: relative;
  cursor: pointer;
  width: 185px;
  height: 85px;
  background: rgb(255, 255, 255);
  box-shadow: rgba(186, 186, 186, 0.22) 0px 8px 36px 4px;
  border-radius: 5px;
  padding: 15px;
  margin: 10px;
}

/* .card {
  border: 2px solid rgba(186, 186, 186, 0.22) 0px 8px 36px 4px;
  box-shadow: rgba(186, 186, 186, 0.22) 0px 8px 36px 4px;
} */

.fbet {
  display: flex;
  justify-content: space-between;
}

.cards .card_icon {
  display: grid;
  place-items: center;
  /* 同时实现水平和垂直居中 */
  width: 50px;
  height: 50px;
  margin-top: 8px;
  /* padding: 11.5px; */
  border-radius: 20px;
}

.cards .card_icon img {
  width: 36px;
  height: 36px;
}

.cards .card_icon_bg1 {
  background: rgb(233, 235, 255);
}

.cards .card_icon_bg2 {
  background: #ffe6e0;
}

.cards .card_icon_bg3 {
  background: #e6fbf2;
}

.cards .card_icon_bg4 {
  background: #fff4ee;
}

.cards .card_icon_bg5 {
  background: #e6fbf2;
}

.cards .card_icon_bg6 {
  background: #e9ebff;
  border-radius: 20px;
}

.cards .card_icon_bg7 {
  background: #dbedff;
}

.cards .card_icon_bg8 {
  background: #f5f5f5;
}

.cards .card_icon_bg9 {
  background: #e6fbf2;
}

.cards .card_number {
  text-align: left;
  color: rgb(51, 51, 51);
  display: block;
  line-height: 45px;
  font-size: 30px;
  font-family: Arial;
  font-weight: bold;
}

.cards .card_title {
  text-align: left;
  display: block;
  color: rgb(102, 102, 102);
  font-family: "Microsoft YaHei";
  font-size: 14px;
}
</style>

<!-- 使用托盘样式 -->
<style scoped>
.grid-huoqu {
  padding: 10px;
}

.region {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.region_header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f4f7;
  padding: 10px 15px;
  background-color: #f9f9f9;
}

.region_title {
  flex: 1;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  position: relative;
}

.region_title:before {
  content: "";
  background: #0362fa;
  display: inline-block;
  width: 6px;
  height: 20px;
  margin-right: 10px;
}

.region_details {
  padding: 15px;
  background-color: #fff;
}

.details {
  padding: 10px;
  border-radius: 5px;
}

.ul-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: -10px;
}

.ul-details li {
  width: 220px;
  height: 140px;
  background-color: #96ecec;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 14px;
  text-align: center;
  transition: transform 0.3s ease;
  border-radius: 40px 0 40px 0;
  background: lightgrey;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 255, 0.2);
  transition: all 0.2s;
  box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, 0.2);
  position: relative;
  z-index: 1; 
}

.ul-details li:hover {
  transform: scale(1.05);
  box-shadow: -12px 12px 2px -1px rgba(0, 0, 255, 0.2);
  z-index: 2; 
}

.ul-details_2 li {
  background-color: rgba(240, 218, 171, 0.7);
}

.ul-details .li_date {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.ul-details .li_date .date {
  font-size: 18px;
  margin-bottom: 10px;
  text-align: left;
  margin-left: 10px;
}

.ul-details .li_date .box {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  margin-left: 0;
}

.ul-details .li_date .data-tag {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 4px;
}
</style>